<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 筛选表单
const filterForm = reactive({
  name: '',
  field: '',
  status: ''
});

// 律师列表数据
const lawyerList = ref([
  {
    id: 1,
    name: '张律师',
    field: 'civil',
    rating: 4,
    status: 'available',
    cases: 24,
    winRate: 85,
    responseTime: 2.5,
    certStatus: 'approved'
  },
  {
    id: 2,
    name: '李律师',
    field: 'criminal',
    rating: 5,
    status: 'busy',
    cases: 32,
    winRate: 92,
    responseTime: 1.8,
    certStatus: 'approved'
  },
  {
    id: 3,
    name: '王律师',
    field: 'business',
    rating: 3,
    status: 'paused',
    cases: 15,
    winRate: 76,
    responseTime: 3.2,
    certStatus: 'pending'
  }
]);

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(3);

// 对话框控制
const dialogVisible = ref(false);
const detailVisible = ref(false);
const trainingVisible = ref(false);
const dialogTitle = ref('新增律师');
const trainingTab = ref('courses');

// 当前选中的律师
const currentLawyer = ref({});

// 律师表单
const lawyerForm = reactive({
  name: '',
  field: '',
  status: '',
  rating: 0
});

// 文件列表
const fileList = ref([]);

// 培训数据
const trainingCourses = ref([
  { id: 1, name: '最新民事诉讼法解读', date: '2023-06-15', duration: '3小时' },
  { id: 2, name: '刑事案件辩护技巧', date: '2023-06-20', duration: '4小时' },
  { id: 3, name: '商业合同法律风险防范', date: '2023-06-25', duration: '2小时' }
]);

const trainingRecords = ref([
  { id: 1, name: '律师职业道德规范', date: '2023-05-10', score: 92, status: 'completed' },
  { id: 2, name: '证据收集与保全', date: '2023-05-20', score: 88, status: 'completed' },
  { id: 3, name: '法律文书写作技巧', date: '2023-06-05', score: null, status: 'inprogress' }
]);

// 绩效数据
const performanceData = ref([
  { date: '2023-05', cases: 5, winRate: 80, responseTime: 2.8 },
  { date: '2023-04', cases: 7, winRate: 85, responseTime: 2.5 },
  { date: '2023-03', cases: 6, winRate: 83, responseTime: 2.6 }
]);

// 状态格式化
const formatStatus = (status) => {
  const statusMap = {
    available: '可用',
    busy: '忙碌',
    paused: '暂停服务'
  };
  return statusMap[status] || '未知';
};

// 专业领域格式化
const formatField = (field) => {
  const fieldMap = {
    civil: '民事法律',
    criminal: '刑事法律',
    business: '商业法律',
    ip: '知识产权'
  };
  return fieldMap[field] || '未知';
};

// 搜索处理
const handleSearch = () => {
  // 接口请求部分挖空，待用户自行补充
  // 示例: axios.get('/api/lawyer/search', { params: filterForm })
  ElMessage.success('搜索功能触发，需对接后端接口');
};

// 重置筛选
const resetFilter = () => {
  filterForm.name = '';
  filterForm.field = '';
  filterForm.status = '';
  handleSearch();
};

// 显示新增对话框
const showAddDialog = () => {
  dialogTitle.value = '新增律师';
  Object.assign(lawyerForm, {
    name: '',
    field: '',
    status: '',
    rating: 0
  });
  fileList.value = [];
  dialogVisible.value = true;
};

// 显示编辑对话框
const showEditDialog = (row) => {
  dialogTitle.value = '编辑律师信息';
  Object.assign(lawyerForm, row);
  dialogVisible.value = true;
};

// 显示详情对话框
const showDetail = (row) => {
  currentLawyer.value = row;
  detailVisible.value = true;
};

// 显示培训管理对话框
const showTrainingDialog = () => {
  trainingVisible.value = true;
};

// 提交表单
const handleSubmit = () => {
  // 接口请求部分挖空，待用户自行补充
  if (dialogTitle.value === '新增律师') {
    // 示例: axios.post('/api/lawyer/info', lawyerForm)
    ElMessage.success('新增律师功能触发，需对接后端接口');
  } else {
    // 示例: axios.put('/api/lawyer/info', lawyerForm)
    ElMessage.success('编辑律师功能触发，需对接后端接口');
  }
  dialogVisible.value = false;
};

// 删除律师
const handleDelete = (row) => {
  ElMessageBox.confirm('确定删除该律师信息吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 接口请求部分挖空，待用户自行补充
    // 示例: axios.delete(`/api/lawyer/info/${row.id}`)
    ElMessage.success('删除律师功能触发，需对接后端接口');
  }).catch(() => {
    ElMessage.info('已取消删除');
  });
};

// 导出数据
const handleExport = () => {
  // 接口请求部分挖空，待用户自行补充
  ElMessage.success('数据导出功能触发，需对接后端接口');
};

// 分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  handleSearch();
};

// 当前页变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
  handleSearch();
};

// 文件上传前处理
const beforeUpload = (file) => {
  // 文件上传处理，可添加文件类型和大小校验
  const isPDF = file.type === 'application/pdf';
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isPDF) {
    ElMessage.error('只能上传PDF格式文件!');
    return false;
  }
  if (!isLt2M) {
    ElMessage.error('文件大小不能超过2MB!');
    return false;
  }

  // 接口请求部分挖空，待用户自行补充
  // 此处应调用文件上传接口
  ElMessage.success('文件上传功能触发，需对接后端接口');
  return false; // 阻止自动上传，由用户自行实现
};

// 文件移除处理
const handleRemove = (file, fileList) => {
  // 接口请求部分挖空，待用户自行补充
  ElMessage.success('文件删除功能触发，需对接后端接口');
};

// 报名培训课程
const enrollCourse = (course) => {
  // 接口请求部分挖空，待用户自行补充
  ElMessage.success(`报名课程: ${course.name}，需对接后端接口`);
};
</script>

<template>
  <div class="app-container">
    <el-container>
      <el-header>
        <h1 class="page-title">律师管理模块</h1>
      </el-header>

      <el-main>
        <!-- 筛选区域 -->
        <el-card class="filter-container">
          <el-form :inline="true" :model="filterForm">
            <el-form-item label="律师姓名">
              <el-input v-model="filterForm.name" placeholder="请输入律师姓名" clearable></el-input>
            </el-form-item>
            <el-form-item label="专业领域">
              <el-select v-model="filterForm.field" placeholder="请选择专业领域" clearable>
                <el-option label="民事法律" value="civil"></el-option>
                <el-option label="刑事法律" value="criminal"></el-option>
                <el-option label="商业法律" value="business"></el-option>
                <el-option label="知识产权" value="ip"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工作状态">
              <el-select v-model="filterForm.status" placeholder="请选择工作状态" clearable>
                <el-option label="可用" value="available"></el-option>
                <el-option label="忙碌" value="busy"></el-option>
                <el-option label="暂停服务" value="paused"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="resetFilter">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 操作按钮区域 -->
        <div style="margin-bottom: 20px;">
          <el-button type="primary" @click="showAddDialog">新增律师</el-button>
          <el-button @click="handleExport">导出数据</el-button>
          <el-button @click="showTrainingDialog">培训管理</el-button>
        </div>

        <!-- 数据表格 -->
        <el-card class="table-container">
          <el-table :data="lawyerList" stripe style="width: 100%">
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column prop="field" label="专业领域" width="120">
              <template #default="scope">
                {{ formatField(scope.row.field) }}
              </template>
            </el-table-column>
            <el-table-column prop="rating" label="评级" width="100">
              <template #default="scope">
                <el-rate v-model="scope.row.rating" disabled></el-rate>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="工作状态" width="100">
              <template #default="scope">
                <span :class="'status-' + scope.row.status">
                  {{ formatStatus(scope.row.status) }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="cases" label="接案量" width="100"></el-table-column>
            <el-table-column prop="winRate" label="胜诉率" width="100">
              <template #default="scope">
                {{ scope.row.winRate }}%
              </template>
            </el-table-column>
            <el-table-column prop="responseTime" label="平均响应时间" width="130">
              <template #default="scope">
                {{ scope.row.responseTime }}小时
              </template>
            </el-table-column>
            <el-table-column prop="certStatus" label="资质状态" width="100">
              <template #default="scope">
                <el-tag :type="scope.row.certStatus === 'approved' ? 'success' : 'warning'">
                  {{ scope.row.certStatus === 'approved' ? '已认证' : '待审核' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="250" fixed="right">
              <template #default="scope">
                <el-button size="small" @click="showEditDialog(scope.row)">编辑</el-button>
                <el-button size="small" type="primary" @click="showDetail(scope.row)">查看</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页控件 -->
          <div class="pagination-container">
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 50, 100]"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            ></el-pagination>
          </div>
        </el-card>
      </el-main>
    </el-container>

    <!-- 新增/编辑律师对话框 -->
    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="600px">
      <el-form :model="lawyerForm" label-width="100px">
        <el-form-item label="姓名">
          <el-input v-model="lawyerForm.name"></el-input>
        </el-form-item>
        <el-form-item label="专业领域">
          <el-select v-model="lawyerForm.field" placeholder="请选择专业领域">
            <el-option label="民事法律" value="civil"></el-option>
            <el-option label="刑事法律" value="criminal"></el-option>
            <el-option label="商业法律" value="business"></el-option>
            <el-option label="知识产权" value="ip"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作状态">
          <el-select v-model="lawyerForm.status" placeholder="请选择工作状态">
            <el-option label="可用" value="available"></el-option>
            <el-option label="忙碌" value="busy"></el-option>
            <el-option label="暂停服务" value="paused"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="评级">
          <el-rate v-model="lawyerForm.rating"></el-rate>
        </el-form-item>
        <el-form-item label="资质认证">
          <el-upload
              action="#"
              :before-upload="beforeUpload"
              :on-remove="handleRemove"
              :file-list="fileList"
              list-type="text"
          >
            <el-button type="primary">上传资质文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 律师详情对话框 -->
    <el-dialog title="律师详情" v-model="detailVisible" width="700px">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="姓名">{{ currentLawyer.name }}</el-descriptions-item>
        <el-descriptions-item label="专业领域">{{ formatField(currentLawyer.field) }}</el-descriptions-item>
        <el-descriptions-item label="工作状态">{{ formatStatus(currentLawyer.status) }}</el-descriptions-item>
        <el-descriptions-item label="评级">
          <el-rate v-model="currentLawyer.rating" disabled></el-rate>
        </el-descriptions-item>
        <el-descriptions-item label="接案量">{{ currentLawyer.cases }}</el-descriptions-item>
        <el-descriptions-item label="胜诉率">{{ currentLawyer.winRate }}%</el-descriptions-item>
        <el-descriptions-item label="平均响应时间">{{ currentLawyer.responseTime }}小时</el-descriptions-item>
        <el-descriptions-item label="资质状态">
          <el-tag :type="currentLawyer.certStatus === 'approved' ? 'success' : 'warning'">
            {{ currentLawyer.certStatus === 'approved' ? '已认证' : '待审核' }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <h3>绩效评估</h3>
      <el-table :data="performanceData" stripe>
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column prop="cases" label="接案量"></el-table-column>
        <el-table-column prop="winRate" label="胜诉率">
          <template #default="scope">
            {{ scope.row.winRate }}%
          </template>
        </el-table-column>
        <el-table-column prop="responseTime" label="平均响应时间">
          <template #default="scope">
            {{ scope.row.responseTime }}小时
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 培训管理对话框 -->
    <el-dialog title="律师培训管理" v-model="trainingVisible" width="800px">
      <el-tabs v-model="trainingTab">
        <el-tab-pane label="培训课程" name="courses">
          <el-table :data="trainingCourses">
            <el-table-column prop="name" label="课程名称"></el-table-column>
            <el-table-column prop="date" label="培训日期"></el-table-column>
            <el-table-column prop="duration" label="时长"></el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button size="small" @click="enrollCourse(scope.row)">报名</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="我的培训记录" name="records">
          <el-table :data="trainingRecords">
            <el-table-column prop="name" label="课程名称"></el-table-column>
            <el-table-column prop="date" label="培训日期"></el-table-column>
            <el-table-column prop="score" label="考核成绩">
              <template #default="scope">
                {{ scope.row.score || '未完成' }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag :type="scope.row.status === 'completed' ? 'success' : 'primary'">
                  {{ scope.row.status === 'completed' ? '已完成' : '进行中' }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}
.page-title {
  margin-bottom: 20px;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}
.filter-container {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
}
.table-container {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.pagination-container {
  margin-top: 20px;
  text-align: right;
}
.function-tag {
  margin-right: 10px;
}
.status-available {
  color: #67c23a;
}
.status-busy {
  color: #e6a23c;
}
.status-paused {
  color: #f56c6c;
}
</style>
